<!--书籍列表-->
<template>
  <div class="home">
    <div class="bookList">
      <h2>精心推荐</h2>
      <ul>
        <li >
          <a @click="goXq(0)" class="clearfix">
            <img src="../../../../static/img/monthly/971117-1409933124000.jpg"  alt="">
            <h3>辉煌岁月</h3>
            <p>点一盏灯，扛一面旗，活一口傲气，做一世兄弟，那是我们的辉煌岁月！王力，一个曾经被同学百般欺负的少年，当他认识了唐俊、金砖、胡昊等热血兄弟后，压抑、无望的人生悄悄发生了改变！连带着老一辈的恩怨！又会牵扯出怎样的历史情仇？又会缔造出如何的盛世辉煌？</p>
          </a>
        </li>
        <li >
          <a @click="goXq(1)" class="clearfix">
            <img src="../../../../static/img/monthly/971117-1409933124000.jpg"  alt="">
            <h3>辉煌岁月</h3>
            <p>点一盏灯，扛一面旗，活一口傲气，做一世兄弟，那是我们的辉煌岁月！王力，一个曾经被同学百般欺负的少年，当他认识了唐俊、金砖、胡昊等热血兄弟后，压抑、无望的人生悄悄发生了改变！连带着老一辈的恩怨！又会牵扯出怎样的历史情仇？又会缔造出如何的盛世辉煌？</p>
          </a>
        </li>
        <li >
          <a @click="goXq(2)" class="clearfix">
            <img src="../../../../static/img/monthly/971117-1409933124000.jpg"  alt="">
            <h3>辉煌岁月</h3>
            <p>点弟的历史情仇？又会缔造出如何的盛世辉煌？</p>
          </a>
        </li>
      </ul>
      <a class="more">查看更多></a>
    </div>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: '13213'
      }
    },
    methods: {
      goXq (bookid) {
        this.$router.push( { name: 'bookinfo', params: { bookid: bookid }})
      }
    }     
  }
</script>


<style>
.bookList{
  margin-bottom: 14px;
  background: #fff;
}
.bookList h2{
  height: 50.39px;
  text-align: left;
  line-height: 50.39px;
  font-size: 16px;
  font-weight: normal;
  color:#333;
  padding-left:14px;
}
.bookList ul li{
  padding:14px;
  border-bottom: 1px solid #ececec;
}
.bookList ul li a img{
  width: 70px;
  height: 100.73px;
float: left;
  margin-right: 16.8px;
}
.bookList ul li a h3{
  font-size: 18px;
  color:#333;
  font-weight: normal;
}
  .bookList ul li a p{
    float: left;
    display: inline-block;
    width: 199.5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    height: 74px;
    font-size: 14px;
    color:#333;
  }
.bookList .more{
  display: block;
  width: 320px;
  height: 62px;
  line-height: 62px;
  text-align: center;
  font-size: 16px;
  color:#666;
}
</style>
